<template>
	<view class="group">
		
		<view class="groups">
			<!-- 商品轮播 -->
			<swiper :style="`height:800px`"  autoplay interval="3000" circular>
				<swiper-item v-for="(item,group) in goods" :key="group">
					<scroll-view >
						<view class="">
							<!-- 商品图片 -->
							<view class="banner">
								<image :src="item.image" mode=""></image>
												
								<view class="price">
									<view class="left">
										<view class="left1"><span class="span1"> ￥899.00 </span> <span class="span2">10人团</span> </view>
										<!-- <view class="left2"><s> ￥999.00</s></view> -->
									</view>
									<view class="right">
										<view class="right1">
											距商家下架
										</view>
										<view class="right2">
											<u-count-down :timestamp="timestamp" height='45' font-size="28" color="white" separator="zh"
												show-days="false" separator-color="#F9A81F" bg-color="#F9A81F" :showDays='true'>
											</u-count-down>
										</view>
									</view>
								</view>
							</view>
							<!-- 商品介绍 -->
							<view class="title">
								<view class="title1">
									{{item.title}}
								
								</view>
								<view class="title2">
									<span class="span1">规格</span> <span class="span2">请选择规格</span>
								</view>
								<view class="title2">
									<span class="span1">快递：免运费</span> 
								</view>
								<view class="title3">
									服务 <span>7天无理由 · 新品 · 72小时内发货</span>
								</view>
							</view>	
							<!-- 商品详情 -->
							<view class="details">
								<view class="title">
									商品详情
								</view>
								<image :src="item.image2" mode=""></image>
							</view>
						</view>
					</scroll-view>
					
				</swiper-item>
				
			</swiper>
			
			
			
			
			<!-- 立即拼购 -->
			<view class="footer" >
	
				<view class="index">			
					<view class="" @tap="goHome">
						<image class="" src="/static/images/tabbar/tabbar_home1.png"
							mode=""></image>
					</view>			
					<text class="">首页</text>
				</view>
	
				<button type="default" @click="toOrder">立即拼购</button>
			</view>
			
		</view>
	

	</view>
</template>

<script>

	export default {
		data() {
			return {
	           timestamp: 86400,
			   goods:[
				   {
					   image:require("../../static/images/index/banner.png"),
					   title:"DW",
					   image2:require("../../static/images/goods.png")
					   
				   },
				   {
				   	   image:require("../../static/images/index5.png"),
					   title:"mac",
					   image2:require("../../static/images/goods1.png")
				   },
				   {
				   	   image:require("../../static/images/index6.png"),
					   title:"mac",
					   image2:require("../../static/images/index7.png")
				   }
			   ]
			};
		},
	
		onLoad() {
			
		},
		mounted() {
	
		},
		methods: {
			
			// 回到首页
			goHome() {
				this.$Router.pushTab('/pages/index/index');
			},
			
	
		}
	};
	
	
</script>


<style lang="scss" scoped>
	.group {
		padding-bottom: 100rpx;
	}
	
	
	.banner{
		position: relative;
		image{
			width: 100%;
		}
		.price {
			width: 100%;
			position: absolute;
			bottom: 0;
			background: url(../../static/images/price.png) repeat-x;
			background-size: 100% 100%;
			overflow: hidden;
			
			.left {
				width: 50%;
				float: left;
				color: white;
				padding: 20rpx 0;
			
				.left1 {
					margin-top: 20rpx;
			
					.span1 {
						padding: 0 44rpx;
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: bold;
					}
				}
			
				.left2 {
					margin-top: 20rpx;
					margin-left: 50rpx;
				}
			}
			
			.right {
				width: 50%;
				float: right;
			
				.right1 {
					padding: 23rpx 0;
					text-align: center;
					font-weight: bold;
					font-size: 16px;
				}
			
				.right2 {
					margin-bottom: 10rpx;
					text-align: center;
				}
			}
		}
	}	
	
		
	
	
	.title {
		background: white;
		padding: 0 30rpx;
	
		.title1 {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			padding: 37rpx 0;
			line-height: 50rpx;
		}
	
		.title2 {
			color: #666666;
			border-bottom: 1rpx solid #F2F2F2;
			overflow: hidden;
			padding: 22rpx 14rpx;
	
			.span1 {
				float: left;
			}
	        .span2 {
	        	float: right;
	        }
			
		}
	
		.title3 {
			padding: 22rpx 14rpx;
	
			span {
				color: #999999;
				margin-left: 33rpx;
			}
		}
	
	}
	
	.details {
		background: white;
		margin-bottom: 100rpx;
		margin-top: 20rpx;
		padding: 20rpx;
	
		.title {
			text-align: center;
			font-weight: bold;
			padding: 12rpx 0;
			font-size: 30rpx;
		}
	
		image {
			width: 100%;
		}
	}
	
	.footer {
		border-top: 1rpx solid #F2F2F2;
		padding: 0rpx 10rpx;
		width: 100%;
		position: fixed;
		bottom:  var(--window-bottom);
		height: 120rpx;
		// height:var(--window-bottom);
		background: white;
		overflow: hidden;
		font-size: 24rpx;
	    .index{
			margin-left:60rpx;
			margin-top:20rpx;
			image {
				width: 43rpx;
				height: 43rpx;
				
			}
		}
		
	
	
	}
	
	button {
		position: relative;
		bottom: 101rpx;
		right:30rpx;
		// border:1px solid red;
		float: right;
		width: 557rpx;
		height: 79rpx;
		
		border-radius: 40rpx;
		margin-top: 20rpx;
		line-height: 79rpx;
		color: white;
		background-image: linear-gradient(to right, #F9A922, #FDC76B);
	}
	

	
</style>

